<template>
  <div class="admin-header">
    <!-- 左侧面包屑导航 -->
    <div class="header-left">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="'/'">首页</el-breadcrumb-item>
        <el-breadcrumb-item>欢迎登录</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    
    <!-- 右侧用户信息和工具区 -->
    <div class="header-right">
      <!-- 全屏按钮 -->
      <div class="header-icon">
        <i class="el-icon-full-screen"></i>
      </div>
      
      <!-- 消息通知 -->
      <div class="header-icon">
        <el-badge is-dot>
          <i class="el-icon-bell"></i>
        </el-badge>
      </div>
      
      <!-- 用户信息下拉菜单 -->
      <el-dropdown trigger="click" class="user-dropdown">
        <div class="user-info">
          <img :src="require('@/assets/images/juan.jpg')" alt="用户头像" class="user-avatar">
          <span class="user-name" v-if="name">{{ name }}</span>
          <span class="user-name" v-else>匿名</span>
          <i class="el-icon-arrow-down"></i>
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <router-link to="/manage/person" class="dropdown-link">
              <i class="el-icon-user"></i> 个人中心
            </router-link>
          </el-dropdown-item>
          <el-dropdown-item>
            <router-link to="/login" class="dropdown-link">
              <i class="el-icon-switch-button"></i> 退出登录
            </router-link>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>
  
<script>
export default {
  name: "AdminHeader",
  props: {
    pathName: String
  },
  data() {
    return {
      squareUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      name: "王小虎"
    }
  },
}
</script>
  
<style scoped>
.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  height: 60px;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.header-left {
  font-size: 16px;
}

.header-right {
  display: flex;
  align-items: center;
}

.header-icon {
  padding: 0 12px;
  cursor: pointer;
  font-size: 18px;
  color: #606266;
  transition: all 0.3s;
}

.header-icon:hover {
  color: #409EFF;
}

.user-dropdown {
  margin-left: 16px;
  cursor: pointer;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 8px;
}

.user-name {
  font-size: 14px;
  color: #606266;
  margin-right: 4px;
}

.dropdown-link {
  text-decoration: none;
  color: #606266;
  display: flex;
  align-items: center;
}

.dropdown-link i {
  margin-right: 5px;
}

.dropdown-link:hover {
  color: #409EFF;
}
</style>